<template>
    <div id='login_box'>
        <div class='login_top'>
            <p class='arrow_p'><span class='arrow1'> </span></p>
            <p class='login_p'>京东登录</p>
        </div>
        <section class='page'>
            <div class='login-tab'>
                 <ul class='login_pas'><span>账号密码登录</span></ul>
                 <ul class='login_mes'><span>短信验证码登录</span></ul>
            </div>
        </section>
        <div class='wrap loginPage'>
            <div class='input-container'>
                <div class='txt-username'>账号</div>
                <input id="username" class="acc-input username txt-input J_ping" type="text" value="" placeholder="用户名/邮箱/已验证手机">
                 <div class='icon icon-clear'></div>
            </div>
            <div class='input-container'>
                <div class='txt-password'>密码</div>
                <input id="password" type="password" class="acc-input password txt-input J_ping" placeholder="请输入密码">
                <div class='checkbtn'></div>
            </div>
            <div id='loginBtn'>登陆</div>
            <div id='loginOneStep'>一键登录</div>
            <div class='quick-nav clearfix'>
                <div class='txt-findpwd'><span class='icon icon-clock'></span><span class='txt-findpwd'>忘记密码</span></div>
                <div class='J_ping quickReg'><span class='icon icon-reg'></span><span class='txt-quickReg'>手机快速注册</span></div>
            </div>
            <div class='quick-login'>
                <h4 class='txt-otherLogin'>其他登录方式</h4>
                <div class='icon_login'>
                  <div class='J_ping quick-qq'>
                    <span class="icon icon-qq"></span>
                  </div>
                  <div class='J_ping quick-wx'>
                    <span class="icon icon-wx"></span>
                  </div>
                </div>
                <div class='agreement-tips'>
                    登录即代表您已同意<router-link to="">京东隐私政策</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {};
</script>
<style scoped>
#login_box{
    font-size: 0.96rem;
}
p{
    margin:0;
    padding: 0;
}
.login_top{
    height: 2.75rem;
    line-height: 2.75rem;
    color: #616161;
    font-size: 1.17rem;
    border-bottom: 1px solid #bbb;
    z-index: 999;
    display: flex;
    justify-content: space-between;
    width:100%
}
.login_p{
    width:60%
}
.arrow_p{
   width:40%;
   position:relative;
}
.arrow1{
    width:1.375rem;
    height:1.375rem;
    overflow: hidden;
    position: absolute;
    background-image: url(/static/iconBg.png);
    background-repeat: no-repeat;
    background-size:cover; 
    display: inline-block;
    background-position:0rem -4rem;
    line-height: 2.75rem; 
    top:35%;
}
.login-tab{
    display: flex;
    justify-content: space-between;
    width:100%;
    border-bottom:1px solid #d7d7d7
}
.login_pas,.login_mes{
    width:50%;
    text-align: center;
    
}
.login_pas>span,.login_mes>span{
    border-bottom: 0.14rem solid #f23030; 
    line-height: 2.76rem; 
    padding-bottom: 0.7rem
}
.loginPage{
    display: flex;
    flex-direction: column;
    justify-content: space-between
}
.wrap{
    width:100%;
}
.input-container{
    width:90%;
    margin:1rem auto 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 0.1rem solid #d7d7d7;
    padding:0.4rem 0;
}
.txt-username,.txt-password{
    width:20%;
}
#username,#password{
    width:80%;
    border:0;
    color:#848689;
    outline:none;
}
 ::-webkit-input-placeholder {
    color: #bec1c7;
}
.icon-clear{
    background: url(/static/iconBg.png) no-repeat;
    width: 1.4rem;
    height: 1.4rem;
    background-size:cover;
    margin-right: 0.8rem;
    /* display: none; */
}
.checkbtn{
    background: url(/static/hide_password.png) no-repeat;
    width: 2rem;
    height: 1.2rem;
    background-size:cover;
    margin-right: 0.4rem;
}
#loginBtn,#loginOneStep{
    width:90%;
    margin:auto;
    text-align: center;
    line-height: 2.76rem; 
}
#loginBtn{
    margin-top: 2rem;
    margin-bottom:1rem;
    background: #eee;
}
#loginOneStep{
    background: #fff;
    color: #f23030;
    border:0.1rem solid #f23030
}
.quick-nav,.quick-login{
    width:90%;
    margin:1rem auto 0;
}
.quick-nav{
    display: flex;
    justify-content: space-between;
}
.icon{
    display: inline-block;
}
.txt-findpwd,.quickReg{
    position: relative;
    padding-left: 1.5rem;
}
.icon-reg,.icon-clock{
    width: 1.5rem;
    height: 1.25rem;
    position: absolute;
    bottom :0;
}
.icon-reg{
    left:0
}
.icon-clock{
    background: url(/static/iconBg.png) no-repeat;
    background-size: cover;
    background-position:0rem -1.75rem;
}
.icon-reg{
    background: url(/static/iconBg.png) no-repeat;
    background-size: cover;
    background-position:0rem -2.9rem;
}
.quick-login{
    margin-top:4rem;
    display: flex;
    flex-wrap:wrap;
    width:90%;
    text-align: center;
    position: relative;
}
.txt-otherLogin{
    color:#bfbfbf;
    font-weight: bold;
    margin:0;
    width:100%;
    flex-direction: column;
    position: absolute;
    top:-0.6rem;
    right: 30%;
    background: #fff;
    width:40%;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
.agreement-tips{
    width:100%;
    margin-top:1rem;
}
.icon_login{
    display: flex;
    justify-content: space-between;
    width:100%;
    padding:3rem 0 0;
    border-top:0.1rem solid #d7d7d7;
}
.quick-wx,.quick-qq{
    width:50%
}
.icon-wx{
    background: url(/static/iconBg.png) no-repeat;
    background-size: cover;
    background-position:0rem -10.5rem;
}
.icon-qq{
    background: url(/static/iconBg.png) no-repeat;
    background-size: cover;
    background-position:0rem -8.8rem;
}
.icon-qq,.icon-wx{
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}
</style>


